<template>
	<div class="anv" v-if="$store.state.isFooterShow">
		<div v-for="(item,index) in items" :key="index" :class="{'on':$store.state.flag==index}" v-on:click="go(item.pagePath,index)">
			<i class="iconfont" :class="item.iconPath"></i> {{item.title}}
		</div>
	</div>
</template>
<script>
import router from "./../../router"
import util from  "./../../js/util/util.js"
export default {
  data () {
    return {
    	 flag:this.$store.state.flag,
    	 items:[{
             "title":this.$t('tab.home'),
             "pagePath":"/kbc/h5/home",
             "iconPath":"icon-shouye",
           },/*{
             "title":"订单",
             "pagePath":"/kbc/h5/order",
             "iconPath":"icon-dingdan",
           },*/{
             "title":this.$t('tab.tradingCenter'), 
             "pagePath":"/kbc/h5/TradingCenter",
             "iconPath":"icon-jiaoyizhongxin",
           },{
             "title":this.$t('tab.wallet'),
             "pagePath":"/kbc/h5/Wallet",
             "iconPath":"icon-qianbao",
           },{
             "title":this.$t('tab.my'),
             "pagePath":"/kbc/h5/user",
             "iconPath":"icon-gerenzhongxinxia",
           }]
    }
  },
  methods: {
  	go:function(url,index){ //地址跳转
  		this.$store.state.flag=index;
  	    util.pushRouter(router,url,{})
  	}
  },
   mounted:function(){
   }
}
</script>

<style>
 .anv {
 	position: fixed;
 	bottom: 0;
 	left: 0;
 	margin: 0;
 	padding: 0;
 	background-color: #eee;
 	display: flex;
 	width: 100%;
 	border-top: 1px solid #dfdfdf;
 }
 .anv>div{width:33.333%;padding:5px 0;font-size:1.0rem; display:flex; float: left; text-align: center;flex-direction: column; color: #888;}
 .anv>div>i{font-size:2rem;}
 .anv>div.on{ color:#007AFF;}
</style>
